<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        p:first-line {
            color: red;
        }

        b {
            display: block;
        }

        b::first-letter {
            color: red;
        }
        b.let::first-letter{
            color:green;
        }
        i.img::before{
            content: url('img/liststyle.png');
        }
        i.img_after::after{
            content: "--GCTEST";
        }
    </style>
</head>
<div>
    <h3>:first-line 伪元素 所选元素第一行 p:first-line{color:red} 设置p元素的第一行为红色字体 注意：只能用于块元素</h3>
    <p>第一个P元素<br>第一个p元素的第二行</p>
    <p>第二个P元素</p>
    <h3>:first-letter 首字母 b:first-letter{color:red} 设置首字母为红色字体  注意：只能用于块元素</h3>
    <b>The long long ago</b>
    <b class="let">The long long ago 使用css类和伪元素  b.let:first-letter</b>
    <h3>:before 在元素之前插入内容 i:before{content:url('xxx.jpg')}</h3>
    <i class="img">使用before添加 角标</i><br>
    <i class="img">使用before添加 角标</i>
    <h3>:after 在元素之后插入内容  i:after{content:url('xxx.jpg')}</h3>
    <i class="img_after">使用after添加 角标<br>555<br></i><br>
    <i class="img_after">使用ater添加 角标</i>
</div>

</html>